<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-07-24 20:10:53
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="demo-drawer-content">
    <div class="header-title">
      问答{{ detType === 'add' ? '新增' : '编辑' }}
    </div>
    <el-form ref="form" :model="editData" label-width="120px" label-position="top" size="small">
      <el-form-item label="问题">
        <el-input v-model="editData.question" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="答案">
        <el-input v-model="editData.answer_text" type="textarea" placeholder="请输入" :rows="2" />
      </el-form-item>
      <div class="flex justify-between">
        <el-form-item label="是否热点问题" class="w-100%">
          <el-radio v-model="editData.hot_switch" :label="1">
            是
          </el-radio>
          <el-radio v-model="editData.hot_switch" :label="0">
            否
          </el-radio>
        </el-form-item>
        <el-form-item label="问题排序" class="w-100%">
          <el-input-number v-model="editData.weight" placeholder="请输入" />
        </el-form-item>
      </div>
      <div class="flex justify-between">
        <el-form-item label="答案附件" class="w-100%">
          <el-radio v-model="editData.attachment_type" :label="0">
            链接
          </el-radio>
          <el-radio v-model="editData.attachment_type" :label="1">
            图片
          </el-radio>
        </el-form-item>

        <el-form-item :label="`链接${editData.attachment_type == 1 ? '图片' : '地址'}`" class="w-100%">
          <UpImage v-if="editData.attachment_type === 1" :url="editData.attachment_payload" @getImg="getFile2" />
          <el-input v-else v-model="editData.attachment_payload" placeholder="请输入" />
        </el-form-item>
      </div>
      <el-form-item label="上传视频">
        <div class>
          <div class="flex flex-wrap">
            <div class="w-100%">
              <el-radio v-model="editData.generate_switch" :label="1">
                一键自动生成
              </el-radio>
              <el-radio v-model="editData.generate_switch" :label="0">
                自主上传视频
              </el-radio>
            </div>
          </div>
        </div>
        <UpVideoFile v-if="!editData.generate_switch" :url="oss_url" @getFile="getFile" />
      </el-form-item>
      <el-form-item label="关联问题" style="position: relative">
        <div class="text-#04D1B8 btn-fix" @click="findQuestion">
          相似问题挖掘
        </div>
        <div class="box">
          <div v-for="(item, i) in list" :key="i" class="flex box-item">
            <img @click="removeLink(i)" src="@/assets/images/model/delete.png" alt="" class="delete-icon" />
            <el-input v-model="list[i]" placeholder="关联问答信息" />
          </div>
        </div>
        <div class="text-#04D1B8 cursor-pointer add" @click="addLink">
          <img src="@/assets/images/model/add.png" alt="" />
          增加关联问题
        </div>
      </el-form-item>
    </el-form>
    <div class="demo-drawer-footer">
      <el-button @click="cancelFun()">取 消</el-button>
      <el-button type="primary" @click="confirmClick()">
        保存
      </el-button>
    </div>
    <dig-question :popShow="showDig" @cancel="cancelDig" @success="successDig"></dig-question>
  </div>
</template>

<script>
import { addQuestion, editQuestion } from '@/api/model'
import UpVideoFile from '@/components/upload/up-video-file.vue'
import UpImage from '@/components/upload/up-image2.vue'
import digQuestion from './dig-question.vue'

export default {
  components: {
    UpVideoFile,
    UpImage,
    digQuestion
  },
  props: {},
  data() {
    return {
      showDig: false,
      editData: {
        generate_switch: 0,
        attachment_type: 0
      },
      list: [],
      sortList: [
        {
          name: '置顶',
          value: '1'
        }
      ],
      detType: 'add',
      oss_url: null,
      faq_uniqueid: ''
    }
  },
  watch: {
    'editData.attachment_type': {
      handler(val, val2) {
        if (val !== val2 && val !== undefined && val2 !== undefined) {
          this.editData.attachment_payload = undefined
        }
      },
      deep: true
    }
  },
  created() { },
  methods: {
    init(row) {
      if (row) {
        this.detType = 'edit'
        this.list = row.faq_simq_list ? JSON.parse(row.faq_simq_list) : []
        this.editData = {
          question: row.question,
          answer_text: row.answer_text,
          generate_switch: row.generate_switch,
          hot_switch: row.hot_switch,
          attachment_type: row.attachment_type,
          weight: row.weight,
          attachment_payload: row.attachment_payload
        }
        this.oss_url = row.answer_video_media_info.oss_url
        this.faq_uniqueid = row.faq_uniqueid
        this.editData = JSON.parse(JSON.stringify(this.editData))
      } else {
        this.detType = 'add'
        this.editData = {
          generate_switch: 0,
          hot_switch: 0,
          attachment_type: 0,
          weight: undefined
        }
        this.oss_url = null
        this.list = []
      }
    },
    successDig(arr) {
      // 回调弹窗
      this.list = [...this.list, ...arr]
    },
    cancelDig() {
      this.showDig = false
    },
    findQuestion() {
      this.showDig = true
    },
    removeLink(i) {
      this.list.splice(i, 1)
    },
    addLink() {
      this.list.push('')
    },
    // 确认
    confirmClick() {
      if (this.editData.generate_switch) {
        let form = {
          model_uniqueid: this.$route.query.uid,
          generate_switch: this.editData.generate_switch,
          question: this.editData.question,
          answer_text: this.editData.answer_text,
          hot_switch: this.editData.hot_switch,
          attachment_type: this.editData.attachment_type,
          weight: this.editData.weight,
          attachment_payload: this.editData.attachment_payload
        }
        let faq_simq_list = JSON.stringify(this.list)
        form.faq_simq_list = faq_simq_list
        if (this.detType === 'add') {
          addQuestion(form)
            .then((res) => {
              this.$message({
                message: '创建成功！',
                type: 'success'
              })
              this.$emit('getList')
            })
            .catch((err) => {
              // console.log(err)
              this.$message({
                type: 'error',
                message: err.msg
              })
            })
        } else {
          form.faq_uniqueid = this.faq_uniqueid
          editQuestion(form)
            .then((res) => {
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              this.$emit('getList')
            })
            .catch((err) => {
              console.log(err)
              this.$message({
                type: 'error',
                message: err.msg
              })
            })
        }
      } else {
        const formData = new FormData()
        formData.append('model_uniqueid', this.$route.query.uid)
        // formData.append('attachment_type', 0)
        formData.append('generate_switch', this.editData.generate_switch)
        formData.append('question', this.editData.question)
        formData.append('answer_text', this.editData.answer_text)
        formData.append('answer_media_file', this.editData.answer_media_file)
        let faq_simq_list = JSON.stringify(this.list)
        formData.append('faq_simq_list', faq_simq_list)
        formData.append('hot_switch', this.editData.hot_switch)
        formData.append('attachment_type', this.editData.attachment_type)
        formData.append('attachment_payload', this.editData.attachment_payload)
        formData.append('weight', this.editData.weight)

        if (this.detType === 'add') {
          addQuestion(formData)
            .then((res) => {
              this.$message({
                message: '创建成功！',
                type: 'success'
              })
              this.$emit('getList')
            })
            .catch((err) => {
              console.log(err)
              this.$message({
                type: 'error',
                message: err.msg
              })
            })
        } else {
          formData.append('faq_uniqueid', this.faq_uniqueid)
          editQuestion(formData)
            .then((res) => {
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              this.$emit('getList')
            })
            .catch((err) => {
              // console.log(err)
              this.$message({
                type: 'error',
                message: err.msg
              })
            })
        }
      }
    },
    cancelFun() {
      this.$emit('cancel')
    },
    getFile(file) {
      this.editData.answer_media_file = file.raw
    },
    getFile2(file) {
      this.editData.attachment_payload = file
    }
  }
}
</script>
<style lang="scss" scoped>
.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}

.demo-drawer-content {
  margin-top: -10px;
  padding: 0 138px 0;
  height: calc(100vh - 85px);
  overflow-y: auto;
}

.demo-drawer-footer {
  text-align: center;
  margin-top: 10px;
}

::v-deep {
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    color: #1c1f23;
    line-height: 22px;
  }

  .avatar-uploader-box .avatar-uploader .el-upload {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn-fix {
  position: absolute;
  left: 70px;
  top: -36px;
  font-size: 12px;
  cursor: pointer;
}

.box {
  background: #f4f5f9;
  border-radius: 0px 0px 0px 0px;
  padding: 12px;

  .box-item {
    align-items: center;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .delete-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    padding: 8px;
    cursor: pointer;
  }
}

.add {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;

  img {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
  }
}
</style>
